<template>
    <view>
        <Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
            <view class="iot-fb_main">
                <view class="iot-fb_title">问题的种类</view>
                <view class="iot-fb_tips">
                    <text>功能建议</text>
                    <text>购买遇到问题</text>
                    <text>性能问题</text>
                    <text>其他</text>
                </view>
                <view class="iot-fb_content">
                    <textarea :value="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea>
                    <view class="iot-fb_tool">
                        <button @tap="handleChooseImg">+</button>

                        <view class="iot-up_img_item" @tap="handleRemoveImg" :data-index="index"
                            v-for="(item, index) in chooseImgs" :key="index">
                            <UpImg :src="item"></UpImg>
                        </view>
                    </view>
                </view>
                <view class="iot-form_btn_wrap">
                    <button @tap="handleFormSubmit" type="warn">
                        <icon type="success_no_circle" size="23" color="white"></icon>

                        提交
                    </button>
                </view>
            </view>
        </Tabs>
    </view>
</template>

<script>
import Tabs from '../../components/Tabs/Tabs';
import UpImg from '../../components/UpImg/UpImg';
export default {
    components: {
        Tabs,
        UpImg
    },
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    value: '体验问题',
                    isActive: true
                },
                {
                    id: 1,
                    value: '商品、商家投诉',
                    isActive: false
                }
            ],

            // 被选中的图片路径 数组
            chooseImgs: [],

            // 文本域的内容
            textVal: '',

            // 外网的图片的路径数组
            UpLoadImgs: []
        };
    },
    methods: {
        handleTabsItemChange(e) {
            // 1 获取被点击的标题索引
            const { index } = e.detail;
            // 2 修改源数组
            let { tabs } = this;
            tabs.forEach((v, i) => (i === index ? (v.isActive = true) : (v.isActive = false)));
            // 3 赋值到data中

            this.tabs = tabs

        },

        // 点击 “+” 选择图片
        handleChooseImg() {
            // 2 调用小程序内置的选择图片api
            uni.chooseImage({
                // 同时选中的图片的数量
                count: 9,
                // 图片的格式  原图  压缩
                sizeType: ['original', 'compressed'],
                // 图片的来源  相册  照相机
                sourceType: ['album', 'camera'],
                success: (result) => {

                    // 图片数组 进行拼接
                    this.chooseImgs = [...this.chooseImgs, ...result.tempFilePaths]

                }
            });
        },

        // 点击 自定义图片组件
        handleRemoveImg(e) {
            // 2 获取被点击的组件的索引
            const { index } = e.currentTarget.dataset;
            // 3 获取data中的图片数组
            let { chooseImgs } = this;
            // 4 删除元素
            chooseImgs.splice(index, 1);

            this.chooseImgs = chooseImgs

        },

        // 文本域的输入的事件
        handleTextInput(e) {

            this.textVal = e.detail.value

        },

        // 提交按钮的点击
        handleFormSubmit() {
            // 1 获取文本域的内容 图片数组
            const { textVal, chooseImgs } = this;
            // 2 合法性的验证
            if (!textVal.trim()) {
                // 不合法
                uni.showToast({
                    title: '输入不合法',
                    icon: 'none',
                    mask: true
                });
                return;
            }
            // 3 准备上传图片 到专门的图片服务器
            // 上传文件的 api 不支持 多个文件同时上传  遍历数组 挨个上传
            // 显示正在等待的图片
            uni.showLoading({
                title: '正在上传中',
                mask: true
            });

            // 判断有没有需要上传的图片数组

            if (chooseImgs.length != 0) {
                chooseImgs.forEach((v, i) => {
                    uni.uploadFile({
                        // 图片要上传到哪里
                        url: 'https://images.ac.cn/Home/Index/UploadAction/',
                        // 被上传的文件的路径
                        filePath: v,
                        // 上传的文件的名称 后台来获取文件  file
                        name: 'file',
                        // 顺带的文本信息
                        formData: {},
                        success: (result) => {
                            console.log(result);
                            let url = JSON.parse(result.data).url;
                            this.UpLoadImgs.push(url);

                            // 所有的图片都上传完毕了才触发
                            if (i === chooseImgs.length - 1) {
                                uni.hideLoading();
                                console.log('把文本的内容和外网的图片数组 提交到后台中');
                                //  提交都成功了
                                // 重置页面

                                this.textVal = '',
                                    this.chooseImgs = []

                                // 返回上一个页面
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        }
                    });
                });
            } else {
                uni.hideLoading();
                console.log('只是提交了文本');
                uni.navigateBack({
                    delta: 1
                });
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
